<template>
	<view class="couponDiv">
		<!-- 优惠卷列表 -->
		<u-sticky>
			<u-subsection :list="list" mode="button" :current="current" @change="sectionChange"></u-subsection>
		</u-sticky>

		<view class="couponDivList">
			<view class="couponDivListItem" v-for="(item,index) in couponList" :key="index">
				<view class="couponDivListItemLeft">
					<h4>{{item.type}}</h4>
					<view class="textDiv" @click="ruleData(item)">规则 ></view>
					<p>{{item.date_range}}</p>
				</view>
				<view class="couponDivListItemRight">
					<h4>{{item.discountValue}}
						<span> {{item.type=='打折卷'?'折':'元'}}</span>
					</h4>
					<p>最高抵扣{{item.rule}}元</p>
					<view style="width: 100rpx;float: right;">
						<u-button text="去使用" shape="circle"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
							size="mini"></u-button>
					</view>

				</view>
			</view>
		</view>
		<u-popup :show="show" @close="close" mode="center" :round="10">
			<view class="popupDiv">
				<h4>使用规则</h4>
				<p>{{showData}}</p>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		discountVoucherList
	} from '@/api/userCenter.js'
	export default {
		data() {
			return {
				list: ['未过期', '已过期', '已使用'],
				current: 0,
				status: '未过期',
				couponList: [],
				show: false,
				showData: ''
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 关闭弹框
			close() {
				this.show = false
			},
			// 规则
			ruleData(item) {
				this.show = true
				this.showData = item.description
			},
			// 菜单切换
			sectionChange(index) {
				this.current = index;
				if (index == 0) {
					this.status = '未过期'
				} else if (index == 1) {
					this.status = '已过期'
				} else if (index == 2) {
					this.status = '已使用'
				}
				this.getList()
			},
			async getList() {
				let res = await discountVoucherList({
					status: this.status
				})
				if (res.code == 200) {
					this.couponList = res.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.popupDiv {
		padding: 20rpx 30rpx;

		h4 {
			text-align: center;
			color: #ff7600;
			margin-bottom: 20rpx;
		}
	}

	.couponDiv {
		padding-top: 20rpx;

		.couponDivList {
			margin-top: 20rpx;
			padding: 0 20rpx;

			.couponDivListItem {
				padding: 10rpx 30rpx;
				background-color: #ffffff;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.couponDivListItemRight {
					p {
						font-size: 22rpx;
						margin: 10rpx;
					}

					h4 {
						font-size: 40rpx;
						color: #ff7600;
						text-align: right;

						span {
							font-size: 26rpx;
						}
					}
				}

				.couponDivListItemLeft {
					width: 60%;

					.textDiv {
						font-size: 22rpx;
						color: #ff7600;
						margin: 10rpx;
					}

					h4 {
						font-size: 40rpx;
					}

					p {
						font-size: 22rpx;
					}
				}
			}
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>